<template>
    <div class="haloTreeCon">
        <!--<h3 style="font-size:16px;margin:14px auto">招商局集团</h3>-->
        <ZTree
            ref='tree'
            :treeData="treeData1"
            :options="options1"
            @node-click="itemClick1"
            @add-node="addNode"
            :key="3"

        >
        </ZTree>
    </div>

</template>

<script>
    import Vue from 'vue';
    // import axios from 'axios';
    import ZTree from '@/components/public/tree/tree.vue';

    ZTree.install = function(Vue) {
        Vue.component('ZTree', ZTree);
    };
    //  import {ZTree} from './../dist/vue2-tree.min'
    //  import './../dist/vue2-tree.min.css'
    Vue.use(ZTree)

    const Tree3 = {
        name: 'Tree3',
        data: function () {
            return {
                options1: {
                    showCheckbox: false,
                    halfCheck: true, //控制父框是否需要半钩状态

                    lazy: true,
                    load: this.loadingChild,

                    showSearch: false,

                    rootName: '我的组织',

                    iconClass: {
                        close: 'icon-expand',
                        open: 'icon-collapse',
                        add: 'icon-add'
                    },
                    iconStyle: {
                        color: '#108ee9'
                    },

                    dynamicAdd: false,
                    // function  handle display add button
                    // return true or false
                    dynamicAddFilter: (node) => {
                        if (node.type === 1 || node.type === 2) {
                            return true
                        }
                        return false
                    },
                    // function handle add node; the new node must have `dynamicAdd` property
                    // the tree component rely on this show editor
                    // return Promise
                    dynamicAddNode: this.addNode,
                    // function handle save node; the new node must have `dynamicSaveNode` property
                    // the tree component rely on this save node
                    // return Promise
                    dynamicSaveNode: this.saveNode,
                    // function handle
                    // return String
                    leafIcon: this.leafIcon,

                    search: {
                        useInitial: true,
                        useEnglish: false,
                        customFilter: null
                    }
                },
                treeData1: []
            }
        },
        created(){
            this.postAjax();
        },
        props:["url","type"],
        mounted () {
            // this.loadTreeData();
        },
        methods: {

            postAjax:function(setid,deptid){
                var type = this.type ==="employee"?1:2;
                if (this.type !== 'employee') {
                    
                    this.Axios.StringPost(this.url ,{setid:setid || '',parent_deptid:deptid || '',type:type,flag:2},true).then(res => {
                        var result = res.data.datas.deptmune;
                        // result[0].checked = true;
                        this.treeData1 = result;
                        
                    })
                } else {
                    this.Axios.StringPost(this.url ,{setid:setid || '',parent_deptid:deptid || '',type:type,flag:2},true).then(res => {
                        var result = res.data.datas.deptmune;
                        // result[0].checked = true;
                        this.treeData1 = result;
                        
                    })
                                
                }
                
            },
            getId:function(node){
                let keys = node.key.split("-");
                let ids = keys[keys.length-1].split(",");
                var setid = ids[1];
                var deptid = ids[2];
                return {
                    setid:setid,
                    deptid:deptid,
                    shortName:node.descr
                };
            },
            /**
             * generate key 0-1-2-3
             * this is very important function for now module
             * @param treeData
             * @param parentKey
             * @returns {Array}
             */
            generateKey (treeData = [], parentKey) {
                treeData = treeData.map((item, i) => {
                    parentKey ? item.key = parentKey + '-' + i+","+item.id + ","+item.parentId : item.key = i+","+item.id + ","+item.parentId;
                    // item.key = parentKey + '-' + i.toString();

                    if (item.hasOwnProperty('children') && item.children.length > 0) {
                        this.generateKey(item.children, item.key)
                    }

                    return item;
                })
                return treeData;
            },
            /**
             * get parent node
             * @param node { Object }
             * @param treeData { Array }
             * @returns { Object }
             */
            getParentNode (node, treeData) {
                let tem,arr = [];
                let postions = node.key.split('-');
                for (var i = 0,len=postions.length;i<len;i++) {
                    arr.push(postions[i].split(',')[0]);
                }
                for (let [index, item] of arr.entries()) {
                    switch (index) {
                        case 0:
                            tem = treeData[item];
                            break;
                        default:
                            tem = tem.children[item];
                    }
                }
                console.log(tem,"tem");
                return tem
            },
            loadTreeData: function () {
                let treeData = [
                    {
                        id: 1,
                        label: '二层集团总部',
                        type: 1,
                        open: true,
                        checked: false,
                        nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
                        parentId: null,
                        visible: true,
                        searched: false,
                        children: [
                            {
                                id: 1001,
                                label: '招商国际',
                                open: false,
                                checked: false,
                                nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
                                parentId: 1,
                                visible: true,
                                searched: false
                            },{
                                id: 1001,
                                label: '招商金融',
                                open: false,
                                checked: false,
                                nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
                                parentId: 1,
                                visible: true,
                                searched: false
                            },{
                                id: 1001,
                                label: '招商证券',
                                open: false,
                                checked: false,
                                nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
                                parentId: 1,
                                visible: true,
                                searched: false
                            }

                        ]
                    },
                    {
                        id: 2,
                        label: '二层集团总部',
                        open: false,
                        type: 2,
                        checked: false,
                        nodeSelectNotAll: false,
                        parentId: null,
                        visible: true,
                        searched: false
                    },
                    {
                        id: 3,
                        label: '二层集团总部',
                        open: false,
                        type: 3,
                        checked: false,
                        nodeSelectNotAll: false,
                        parentId: null,
                        visible: true,
                        searched: false,
                        leaf: true
                    },
                    {
                        id: 4,
                        label: '二层集团总部',
                        open: false,
                        type: 4,
                        checked: false,
                        nodeSelectNotAll: false,
                        parentId: null,
                        visible: true,
                        searched: false
                    }
                ]

//                this.treeData1 = this.generateKey(treeData, 0);
                this.treeData1 = treeData
            },
            async loadingChild (node, index) {
                try {
//          let data = await axios.get('http://localhost:8082/child.json', {responseType: 'json'});
                    // let data = await new Promise((resolve, reject) => {
                    //     setTimeout(() => {
                    //         let d = [
                    //             {
                    //                 "id": 1,
                    //                 "label": "人力资源",
                    //                 "open": false,
                    //                 "checked": false,
                    //                 "nodeSelectNotAll": false,
                    //                 "parentId": null,
                    //                 "visible": true,
                    //                 "searched": false
                    //             },
                    //             {
                    //                 "id": 2,
                    //                 "label": "财务部",
                    //                 "open": false,
                    //                 "checked": false,
                    //                 "nodeSelectNotAll": false,
                    //                 "parentId": null,
                    //                 "visible": true,
                    //                 "searched": false
                    //             }
                    //         ]
                    //         resolve(d)
                    //     }, 1000)
                    // })
                    // let tem = this.getParentNode(node, this.treeData1)

                    // set Children
//                    Vue.set(tem, 'children', this.generateKey(data, node.key));
                    let idsGroup = this.getId(node);
                    var type = this.type ==="employee"?1:2;
                    if (this.type !== 'employee') {
                        let data = await this.Axios.StringPost(this.url ,{setid:idsGroup.setid || '',parent_deptid:idsGroup.deptid || '',type:type,flag:2},true);
                        let tem = this.getParentNode(node, this.treeData1)
                        Vue.set(tem, 'children', data.data.datas.deptmune);
                    } else {
                        // let data = await this.Axios.Get(this.URL.getMenuPostion.url);
                        // let tem = this.getParentNode(node, this.treeData1)
                        // Vue.set(tem, 'children', data.data.datas);  
                        let data = await this.Axios.StringPost(this.url ,{setid:idsGroup.setid || '',parent_deptid:idsGroup.deptid || '',type:type,flag:2},true);
                        let tem = this.getParentNode(node, this.treeData1)
                        Vue.set(tem, 'children', data.data.datas.deptmune);                      
                    }
                   


                    // Promise.resolve(data);
                } catch (e) {
                    // Promise.reject(e);
                }
            },


            itemClick1 (node) {
                console.log(node);
                let idsGroup = this.getId(node);
                this.$emit('update:returnValue',idsGroup);

            },
            async addNode (item) {
                let parent = this.getParentNode(item, this.treeData1)
                let node = {
                    id: 2,
                    label: '一级节点',
                    open: false,
                    checked: false,
                    nodeSelectNotAll: false,
                    parentId: null,
                    visible: true,
                    searched: false
                }
                if (!item.hasOwnProperty('children') || item.children.length === 0) {
                    await this.loadingChild(parent)
                }
                parent.open = true

                parent.children.splice(0, 0, Object.assign({}, { dynamicAdd: true, loaded: true }, node))

//                this.generateKey(parent.children, parent.key) // regenerate key
                return Promise.resolve(parent.children)

            },
            async saveNode (item, e) {
                if (!e.target.value) {
                    return
                }
                try {
                    // todo sent data to sever
                    delete item.dynamicAdd // 删除属性

                    Vue.set(item, 'label', e.target.value)

                    e.target.value = ''

                    return Promise.resolve(item) // server return data with id
                } catch (e) {
                    return Promise.reject(e)
                }



            },
            /**
             * 叶子结点 的 icon class
             * @param node
             * @returns {*}
             */
            leafIcon (node) {
                // filter type and return icon class

                if (node.type === 1 || node.type === 2) {
                    return ''
                }
                return 'icon-square'
            }

        }
    }

    export default Tree3
</script>

<style  scoped>
.haloTreeCon{
    padding-top:20px;
}
</style>
